<template>
  <div>
    <el-container class="index">
      <el-aside width="200px">
        <el-menu
            router
            default-active="2"
            class="el-menu-vertical-demo menu "
            background-color="#545c64"
            text-color="#fff"
            @select="select"
            active-text-color="#ffd04b">

          <el-submenu index="/user">
            <template slot="title">
              <i class="el-icon-s-custom"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/user">
              <i class="el-icon-menu"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/journal">
              <i class="el-icon-date"></i>
              <span slot="title">用户日志</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/article">
            <i class="el-icon-suitcase"></i>
            <span slot="title">博客管理</span>
          </el-menu-item>
          <el-menu-item index="/course">
            <i class="el-icon-folder-checked"></i>
            <span slot="title">课程管理</span>
          </el-menu-item>
          <el-menu-item index="/test">
            <i class="el-icon-s-flag"></i>
            <span slot="title">试题管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main class="view">
        <el-container>
          <el-header>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: to }">{{content}}</el-breadcrumb-item>
            </el-breadcrumb>
          </el-header>
          <el-main >
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      to: '/user',
      content: "用户管理",
      all:{
        '/user':"用户管理",
        '/journal':"日志管理",
        '/test':"试卷管理",
        '/course':"课程管理",
        '/article':"文章管理"
      }
    }
  },
  methods:{
    select(index){
      this.to=index
      this.content=this.all[index]
    }
  }
}
</script>

<style scoped lang="scss">
.view {
  height: calc(100vh);
  width: 100%;
}

.index {
  min-height: calc(100vh);
  width: 100%;
}

.menu {
  height: 100%;
}
</style>
